<template>
    <div class="gameOver" v-if="gamestatus.winner">
        <div class="gameOver-content">
            <div class="gameOver-title">游戏结束</div>
            <div class="gameOver-text">{{gamestatus.myAction?'你输了🤣🫵🤡':'你赢了🎉🎉🎉'}}</div>
            <div class="button-group">
                <router-link to="/lobby">
                    <button>返回大厅</button>
                </router-link>
                <button @click="againPlay">再和这个人玩</button>
            </div>
        </div>
            
    </div>
</template>
<script setup>
import { watch } from "vue";
import useGamestatus from "../stores/game";
import { useUserStore } from "../stores/user";
import useNetStore from "../stores/net.js";


const gamestatus = useGamestatus();
let userStore = useUserStore();
const net = useNetStore();
watch(() => gamestatus.winner,()=>{
    console.log('结算啦');
    settlement();
})
function settlement(){
    if(!gamestatus.winner){return;}
    let myRoom=gamestatus.rooms.find(room=>room.roomId==gamestatus.myRoomId);
    let blackUserId=myRoom.players[0].userId;
    let whiteUserId=myRoom.players[1].userId;
    let winner=gamestatus.winner==='black'?blackUserId:whiteUserId;
    console.log({blackUserId,whiteUserId,winner});
    if(blackUserId===userStore.user.userId){
        net.fasong({blackUserId,whiteUserId,winner},'/users/addRecord').then(res=>{
            if(res.code===200){
                console.log('对局记录成功');
            }else{
                console.log('error',res);
            }
        })
    }
}
function againPlay(){
    let myRoom=gamestatus.rooms.find(room=>room.roomId==gamestatus.myRoomId);
    let toUserId=myRoom.players.find(player=>player.userId!=userStore.user.userId).userId;
    gamestatus.socket.emit("createHideRoom",{userId:userStore.user.userId,toUserId:toUserId})
    console.log({userId:userStore.user.userId,toUserId:toUserId});
}

</script>
<style scoped>
    .gameOver{
        width:100vw;
        height:100vh;
        display: flex;
        position:fixed;
        background-color: rgba(0,0,0,0.5);
        top:0;
        left:0;
        justify-content:center;
        align-items:center;
        z-index:9999;
        animation: fadeIn 0.3s ease-out;
        
        &>.gameOver-content{
            width: 400px;
            min-height: 300px;
            background-color: #fff;
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 30px;
            
            .gameOver-title {
                font-size: 28px;
                font-weight: bold;
                color: #333;
            }
            
            .gameOver-text {
                font-size: 24px;
                color: #4CAF50;
                font-weight: 500;
                margin-bottom: 20px;
            }
            
            .button-group {
                display: flex;
                gap: 20px;
                width: 100%;
                justify-content: center;
                
                button {
                    padding: 12px 24px;
                    border-radius: 6px;
                    border: none;
                    background-color: #4CAF50;
                    color: white;
                    font-size: 16px;
                    cursor: pointer;
                    transition: all 0.2s ease;
                    width: 160px;
                    
                    &:hover {
                        background-color: #3e8e41;
                        transform: translateY(-2px);
                    }
                    
                    a {
                        color: white;
                        text-decoration: none;
                    }
                    
                    &:last-child {
                        background-color: #2196F3;
                        
                        &:hover {
                            background-color: #0b7dda;
                        }
                    }
                }
            }
        }
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
</style>